<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "MonitorDataPannel",
  props: {
    title: {
      type: String,
      default: '',
    },
    /**
     * 是否显示头部
     */
    showHeader: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以被选中
     */
    canCheck: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否被选中
     */
    isChecked: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 250
    },
    width: {
      type: Number,
      default: 200
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { vueSeamlessScroll },
  data(){
    return {
      tableData: [{
        factor: '高锰酸盐指数',
        value: '1.7',
        unit: 'mg/L',
        over: '否'
      },{
        factor: '水温',
        value: '50',
        unit: '度',
        over: '是'
      },{
        factor: 'PH',
        value: '8',
        unit: '--',
        over: '否'
      },{
        factor: '浊度',
        value: '35.0',
        unit: 'NTU',
        over: '是'
      },{
        factor: '氨氮',
        value: '0.02',
        unit: 'mg/L',
        over: '否'
      },{
        factor: '总磷',
        value: '0.005',
        unit: 'mg/L',
        over: '否'
      },{
        factor: '总氮',
        value: '2.52',
        unit: 'mg/L',
        over: '否'
      },{
        factor: '叶绿素a',
        value: '0.035',
        unit: 'mg/L',
        over: '否'
      },{
        factor: '藻密度',
        value: '4187520',
        unit: 'cells/L',
        over: '否'
      }]
    }
  },
  created() {


  },
  mounted() {

  },
  computed:{
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {


  },
};
</script>

<template>
  <div
      class="base-panel-container"
      :style="{ height: height, width: width, minHeight: '130px' }"
  >
    <div class="base-panel-common-bg"/>
    <div class="base-panel-panel-content">
      <div v-if="showHeader" class="base-panel-top-title">
        <div class="base-panel-text-box">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </div>
        <div>
          <slot name="rightTitle"/>
        </div>
      </div>
      <div class="base-panel-content">
        <template v-if="canCheck">
          <div style="cursor: pointer" :class="{ 'base-panel-checked': isChecked }">
            <slot name="default"/>
          </div>
          <el-table >
            <el-table-column
                prop="factor"
                label="监测因子"
                width="120">
            </el-table-column>
            <el-table-column
                prop="value"
                label="监测值"
                width="100">
            </el-table-column>
            <el-table-column
                prop="unit"
                label="单位">
            </el-table-column>
            <el-table-column
                prop="over"
                label="是否超标">
            </el-table-column>
          </el-table>
          <vue-seamless-scroll :data="tableData" :class-option="classOption" class="warp">
            <el-table :data="tableData" :show-header="false">
              <el-table-column
                  prop="factor"
                  label="监测因子"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="value"
                  label="监测值"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="unit"
                  label="单位">
              </el-table-column>
              <el-table-column
                  prop="over"
                  label="是否超标">
              </el-table-column>
            </el-table>
          </vue-seamless-scroll>
        </template>
        <template v-else>
          <slot name="default"/>

        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.base-panel-container {
  z-index: 10;
  top: 100px;
  left: 40px;
  color: white;
  width: 200px;
  height: 280px;
  .base-panel-panel-content {
    width: 400px;
    position: absolute;
    font-size: 14px;
    /* height: 300px; */
    table {

    }
  }
  >>>.el-table {
    background-color: rgba(0,0,0,0);

    tr {
      background-color: rgba(0,0,0,0) !important;
    }
  }

  .el-table tr {
    background-color: rgba(0,0,0,0);
  }
}
>>>.el-table {
  color: white;
}
>>>.el-table thead {
  color: white;
}
>>>.el-table tr {
  background-color: rgba(0,0,0,0);
}
>>>.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom: 0px;
}
>>>.el-table--scrollable-x .el-table__body-wrapper{
  overflow: hidden;
}
>>>.el-table th.el-table__cell{
  background-color: rgba(0,0,0,0);
}
>>>.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom: 0px solid #EBEEF5;
}
>>>.el-table th.el-table__cell.is-leaf{
  border-bottom: 0px solid #EBEEF5;
}
>>>.el-table .el-table__cell{
  padding: 8px 0px;
}
>>>.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: rgba(0,0,0,0);
}
>>>.el-table__empty-block{
  display: none;
}
.warp {
  height: 280px;
  overflow: hidden;
}
</style>